<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>花样连接卡</title>
		<link rel="shortcut icon" href="img/favicon.ico">
		<link rel="stylesheet" href="https://unpkg.com/aos@2.3.1/dist/aos.css" />
		<style type="text/css">
			/* 			* {
				margin: 0;
				padding: 0;
			} */

			.box {
				width: 310px;
				height: 310px;
				padding-top: 10px;
				padding-left: 10px;
				border: 2px solid red;
			}

			.box_1,
			.box_2,
			.box_3,
			.box_4,
			.box_5 {
				width: 100px;
				height: 100px;
				background-image: url("img/gif1.gif");
				background-size: 100px 100px;
				line-height: 180px;
				text-align: center;
			}

			.box_2 {
				margin-left: 200px;
				margin-top: -300px;
			}

			.box_5 {
				margin-left: 100px;
			}

			.box_4 {
				margin-top: 100px;
				margin-left: 200px;
			}

			.box_1:hover,
			.box_2:hover,
			.box_3:hover,
			.box_4:hover,
			.box_5:hover {
				background-color: dodgerblue;
				cursor: pointer;
			}
		</style>
	</head>
	<body>
		<div class="box" data-aos="zoom-out-down">
			<div class="box_1">连接1</div>
			<div class="box_5">连接5</div>
			<div class="box_3">连接3</div>
			<div class="box_2">连接2</div>
			<div class="box_4">连接4</div>
		</div>
		<!-- AOS js -->
		<!-- 淡入淡出插件 -->
		<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
		<script>
			AOS.init({
				offset: 200,
				delay: 0,
				duration: 1000
			});
		</script>
	</body>

</html>
